<template>
  <div class="login">
    <van-nav-bar
    title="登录"
    left-arrow
    @click-left="onClickLeft"
    />
    <!-- @click-left="$router.back()" -->
    <!-- {{$store.state.a}} -->
    <!-- <button @click="change">a++</button> -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="regular.username"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="regular.password"
      />
      <div class="dz">
        <router-link to="/reg">注册账号</router-link><span><router-link to="/change">修改密码</router-link></span><span><router-link to="./forget">忘记密码</router-link></span>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form } from 'vant';
import { Field } from 'vant';
import regular from '@/utils/verify/regular'
export default {
  name: "WorkspaceJsonLogin",
  components:{
    [Form.name]:Form,
    [Field.name]:Field,
  },
  data() {
    return {
      username:'',
      password:'',
      regular,
    };
  },
  methods: {
    change(){
      this.$store.commit('change',666)
    },
    onClickLeft(){
      this.$router.push({
        path:'/my'
      })
    },
    // 登录
    onSubmit() {
      let {username,password}=this;
      this.$http.post('/user/login',{
        username,
        password
      })
      .then(res=>{
        console.log(res);
        this.$toast(res.msg)
        if(res.code==0){
          let{token,tokenExpired,uid,userInfo}=res
          localStorage.setItem('token',token)
          localStorage.setItem('tokenExpired',tokenExpired)
          localStorage.setItem('uid',uid)
          localStorage.setItem('userInfo',JSON.stringify(userInfo))
          // 挂载到全局  响应式
          this.$root.uid=uid
          this.$root.token=token
          this.$root.userInfo=userInfo
          setTimeout(()=>{
            this.$router.go(-1);
          },800)
        }
      })
    },
    
  },
  mounted() {}

};
</script>

<style lang="scss" scoped>
.dz{
  padding: 10px 10px;
  span{
    display: inline-block;
    margin-left: 20.8vw;
  }
}
</style>